<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<tr:document xmlns="http://www.w3.org/1999/xhtml"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:mias="http://www.monsters.inc/mias"
             xmlns:tr="http://myfaces.apache.org/trinidad"
             xmlns:c="http://java.sun.com/jstl/core">

<ui:composition template="templates/template.xhtml">
  <!--
       This page lists all employees. 
  -->
  <ui:define name="title">Employees</ui:define>
  <ui:define name="content"> 
      <tr:table var="emp" value="#{empsTable.employees}" rows="20" id="kids" 
                rowBandingInterval="1" horizontalGridVisible="false" 
                rowSelection="multiple" binding="#{empsTable.table}">
        <mias:column columnName="id" bean="#{emp}" sortable="true" />
        <mias:column columnName="name" custom="true" >
          <mias:column columnName="firstName" bean="#{emp}" />
          <mias:column columnName="lastName" bean="#{emp}" sortable="true" />
        </mias:column>
        <mias:column columnName="birthDate" bean="#{emp}" sortable="true" />
        <mias:column columnName="hireDate" bean="#{emp}" sortable="true" />
        <mias:column columnName="kidsScared" bean="#{emp}" sortable="true" />
        <mias:column columnName="edit" headerName="emptyTableHeader" custom="true">
          <tr:commandLink action="edit" immediate="true">
            <tr:image source="../images/pencil.png" inlineStyle="border-width: 0px;" />
            <tr:setActionListener to="#{pageFlowScope.selectedEmployee}" from="#{emp}"/>
          </tr:commandLink>
        </mias:column>    
        <f:facet name="detailStamp">
          <h:panelGroup>
            <mias:field id="jobTitle" bean="#{emp}" readOnly="true"/>
            <mias:field id="salary" bean="#{emp}" readOnly="true">
              <tr:convertNumber type="currency"/>
            </mias:field>
          </h:panelGroup>
        </f:facet>
      </tr:table>
      
      <!-- Note that this is a rather cumbersome way to show/hide a section. 
           It would have been a lot simpler if we e.g. used a <tr:showDetail> 
           component. But in this case we wanted to illustrate that we have
           to partial trigger the surrounding component if we want to change
           the state of the rendered attribute. -->
      <tr:selectBooleanCheckbox id="checkBox" autoSubmit="true" 
                                label="Show list" value="#{empsTable.showAsList}"/>
      <tr:panelGroupLayout partialTriggers="checkBox">
        <tr:panelHeader rendered="#{empsTable.showAsList}" text="List of employees" inlineStyle="margin-top: 20px;" disclosed="true">
          <tr:panelList>
            <c:forEach var="emp" items="#{empsTable.employees}">
              <tr:commandLink action="edit" immediate="true">
                <tr:outputText value="#{emp.firstName} #{emp.lastName}" />
                <tr:setActionListener to="#{pageFlowScope.selectedEmployee}" from="#{emp}"/>
              </tr:commandLink>
            </c:forEach>
          </tr:panelList>
        </tr:panelHeader>
      </tr:panelGroupLayout>
      
  </ui:define>
</ui:composition>

</tr:document>